<template>
  <Nav_bar title="修改密码" />
  <div class="box">
    <form @submit="" @reset="" class="_form">
      <div class="form_phone">
        <text class="leftIcon icon a-xiugai1"></text>
        <input
          class="phone_input"
          :type="pawShow.paw1"
          v-model.trim="loginForm.oldPassword"
          placeholder="请输入现有密码"
          maxlength="16"
          minlength="6"
        />
        <text
          class="rightIcon icon"
          @click="changePawIcon('paw1', pawShowIcon.paw1)"
          :class="pawShowIcon.paw1"
        ></text>
      </div>
      <div class="form_forget" @click="$router.push('/change_paw')">忘记密码</div>
      <div class="form_lock">
        <text class="leftIcon icon lock"></text>
        <input
          class="lock_input"
          v-model.trim="loginForm.newPassword"
          :type="pawShow.paw2"
          autocomplete="new-password"
          placeholder="请输入新密码"
          maxlength="16"
          minlength="6"
        />
        <text
          @click="changePawIcon('paw2', pawShowIcon.paw2)"
          class="rightIcon icon"
          :class="pawShowIcon.paw2"
        ></text>
      </div>
      <div class="form_lock">
        <text class="leftIcon icon lock"></text>
        <input
          class="lock_input"
          v-model.trim="loginForm.newPassword2"
          :type="pawShow.paw3"
          autocomplete="new-password"
          placeholder="请再次输入新密码"
          maxlength="16"
          minlength="6"
        />
        <text
          @click="changePawIcon('paw3', pawShowIcon.paw3)"
          class="rightIcon icon"
          :class="pawShowIcon.paw3"
        ></text>
      </div>
      <van-button
        type="primary"
        round
        size="normal"
        color="linear-gradient(to right, #66dfbc, #14c691)"
        :disabled="!disabled"
        :loading="loading"
        :block="true"
        @click="skip_login()"
      >
        提交
      </van-button>
    </form>
  </div>
  <van-popup v-model:show="showCenter" round :close-on-click-overlay="false" class="van_popup">
    <div class="popup_box">
      <div class="_title1">温馨提示！</div>
      <div class="_title2">修改密码成功，请重新登录</div>
      <van-button class="logOut" type="default" block @click="logOut()">登录</van-button>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, computed } from 'vue'
import { encryption } from '@/utils/rsa_encipher'
import { useRouter } from 'vue-router'
import { Msg } from '@/utils/tools'
import { postResetPasswordApi } from '@/api/ivestorMy/ivestorMy'
import { useUserInfoStore } from '@/stores'

const userInfoStore = useUserInfoStore()

const loginForm = ref({
  oldPassword: '',
  newPassword: '',
  newPassword2: '',
})
const pawShowIcon = ref({
  paw1: 'a-mimachakan-quxiao2',
  paw2: 'a-mimachakan-quxiao2',
  paw3: 'a-mimachakan-quxiao2',
})
const pawShow = computed(() => {
  return {
    paw1: pawShowIcon.value.paw1 === 'a-mimachakan-quxiao2' ? 'password' : 'text',
    paw2: pawShowIcon.value.paw2 === 'a-mimachakan-quxiao2' ? 'password' : 'text',
    paw3: pawShowIcon.value.paw3 === 'a-mimachakan-quxiao2' ? 'password' : 'text',
  }
})
const showCenter = ref(false)
const disabled = computed(() => {
  return (
    loginForm.value.oldPassword.length <= 16 &&
    loginForm.value.oldPassword.length >= 6 &&
    loginForm.value.newPassword.length <= 16 &&
    loginForm.value.newPassword.length >= 6 &&
    loginForm.value.newPassword2.length <= 16 &&
    loginForm.value.newPassword2.length >= 6
  )
})
const $router = useRouter()
const loading = ref(false)
/**触发密码展示 */
function changePawIcon(key, param) {
  if (param === 'a-mimachakan1') {
    pawShowIcon.value[key] = 'a-mimachakan-quxiao2'
  } else {
    pawShowIcon.value[key] = 'a-mimachakan1'
  }
}
/**提交并且跳转到登录页 */
const skip_login = async () => {
  if (loginForm.value.newPassword !== loginForm.value.newPassword2)
    return Msg('两次输入密码不一致，请重新输入')
  loading.value = true
  const param = {
    oldPassword: encryption(loginForm.value.oldPassword),
    newPassword: encryption(loginForm.value.newPassword),
  }
  try {
    const res = await postResetPasswordApi(param)
    loading.value = false
    if (res.code === 200) {
      showCenter.value = true
    }
  } catch (error) {
    loading.value = false
  }
}

/** 点击退出投资人系统 */
const logOut = () => {
  userInfoStore.deleteUserInfo()
  userInfoStore.deleteToken()
  localStorage.removeItem('userInfo')
  $router.push('/login')
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: calc(100% - 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to top, #fff, #effaf6);
  padding-top: 19px;
}
.vanNavBar {
  background: #f0faf7 !important;
}
:deep(.van-nav-bar__title) {
  color: #000 !important;
}
:deep(.van-icon) {
  color: #000 !important;
}

._form {
  margin-top: 200px;
  .form_forget {
    width: 299px;
    text-align: right;
    color: #a8a8a8;
    font-size: 12px;
    margin: 15px 0;
  }
  .form_phone,
  .form_lock {
    width: 299px;
    height: 44px;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-size: 12px;
    .leftIcon {
      font-size: 16px;
      color: #09d336;
      margin: 0 5px 0 6px;
    }
    .rightIcon {
      color: #a8a8a8;
      height: 44px;
      width: 40px;
      line-height: 44px;
      text-align: center;
    }

    .phone_input,
    .lock_input {
      flex: 1;
    }
  }
  .form_phone {
    margin-bottom: 0px;
  }
}
.user_agreement {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  color: var(--c9);
  margin-bottom: 39px;
  ._checkbox {
    width: 15px;
  }
  .user_agreement_text {
    display: flex;
    width: 100%;
    font-size: var(--fs10);
    margin-left: 4px;
    .agreement {
      color: #15c691;
    }
  }
}

.popup_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .logOut {
    width: 112px;
    height: 34px;
    font-size: 14px;
    color: #fff;
    border-radius: 6px;
    background: linear-gradient(90deg, #64e0bb 0%, #1ac894 100%);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.09));
  }
  ._title1 {
    font-size: 16px;
    color: #333;
  }
  ._title2 {
    font-size: 12px;
    color: #999;
    margin: 8px 0px 20px;
  }
}
.van_popup {
  padding: 32px 75px 20px;
}
</style>
